﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount">0</span></h2>
        <ol id="todolist" class="demo-box">
            <!-- <li>
                <input type='checkbox'>
                <p>吃饭</p>
                <a href='javascript:;'></a>
            </li>
            <li>
                <input type='checkbox'>
                <p>打豆豆</p>
                <a href='javascript:;'></a>
            </li> -->
        </ol>
        <h2>已经完成 <span id="donecount">0</span></h2>
        <ul id="donelist">
            <!-- <li>
                <input type='checkbox' checked>
                <p>睡觉</p>
                <a href='javascript:;'></a>
            </li> -->
        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>

    <script>
        // 任务列表
        let todolist = [
            // content 任务内容
            // done   任务是否已完成  true 已完成    false 正在进行中
            { content: "敲JS基础代码", done: true },
            { content: "敲webApis代码", done: true },
            { content: "敲JS进阶代码", done: false },
            { content: "练习Echarts图表代码", done: false },
            { content: "预习Ajax课程", done: false },
        ]


        // 功能列表
        // 1. 渲染数据功能 (包含 统计任务数量)
        // 2. 回车发布功能（最新的在最上面）
        // 3. 删除操作
        // 4. 切换任务的完成状态
        // 5. 本地存储 与 读取本地存储的数据
        //     啥时候存（添加、删除、切换任务完成状态）

        // 技术要求
        //  1. 通过jQ语法来获取元素 + 注册事件 + 注册事件委托（on语法）
        //          不使用原生JS获取元素 和 注册事件
        //  2. 渲染数据功能，需要使用 map + join 配合实现功能
        //  3. 尽可能的使用ES6语法
        //          比如 箭头函数 、 对象属性和方法简写、数组常用方法（filter）



        // 本地存储
        // localStorage.setItem('data', JSON.stringify(todolist))
        let arr = JSON.parse(localStorage.getItem('data')) || []
        // 功能1. 渲染数据功能 (包含 统计任务数量)
        // 创建两个完成和未完成的空数组
        let nwC = []
        let wC = []
        function render(list) {
            // 根据done的true或false分别来筛选出完成和未完成的新数组
            nwC = list.filter(ele => ele.done === false)
            wC = list.filter(ele => ele.done === true)

            // 重新组合完成和未完成的数组，并存到本地
            list = [...nwC, ...wC]
            localStorage.setItem('data', JSON.stringify(list))
            arr = JSON.parse(localStorage.getItem('data')) || []


            // 根据不同的数组渲染页面
            const newList1 = nwC.map((ele, index) => {
                const { content, done } = ele
                return `
            <li data-index=${index}>
                <input type='checkbox'  ${done ? 'checked' : ''}>
                <p>${content}</p>
                <a href='javascript:;' data-index = '${index}'></a>
            </li>
                `
            }).join('')
            const newList2 = wC.map((ele, index) => {
                const { content, done } = ele
                return `
            <li data-index=${index + nwC.length}>
                <input type='checkbox'  ${done ? 'checked' : ''}>
                <p>${content}</p>
                <a href='javascript:;' data-id = '${index}'></a>
            </li>
                `
            }).join('')
            $('#todolist').html(newList1)
            $('#donelist').html(newList2)
            
            // 统计数量
            $('#todocount').html(nwC.length)
            $('#donecount').html(wC.length)

        }
        render(arr)

        // 功能2. 回车发布功能（最新的在最上面）

        // 注册键盘弹起事件
        $('section #title').on('keyup', function (e) {
            const content = $('input#title').val().trim()
            // 判断是否为回车键
            if (e.key === 'Enter') {
                // 判断数据不能为空
                if (!content) {
                alert('内容不能为空')
                return
            }
            // 将输入的数据重新渲染到页面，并清空
                arr.unshift({
                    content: content,
                    done: false
                })
                $(this).val('')
                render(arr)
                localStorage.setItem('data', JSON.stringify(arr))
            }

        })
        // 功能3. 删除操作
        // 利用事件委托来注册点击事件，删除要删除的项
        $('ol,ul').on('click', 'a', function () {
            if (confirm('您要删除这条信息吗')) {
                arr.splice($(this).parents('li').data('index'), 1)
                render(arr)
                localStorage.setItem('data', JSON.stringify(arr))
            }
        })


        // 功能4. 切换任务的完成状态

        $('ol,ul').on('click','input',function(){
        // 将点击的小复选框对应数组中的done值取反再重新渲染页面存储
        let flag = !(arr[$(this).parents('li').data('index')].done)
        arr[$(this).parents('li').data('index')].done = flag
        render(arr)
        localStorage.setItem('data', JSON.stringify(arr))
        })

    </script>
</body>

</html>